<template>
    <div>
        <h2>修改帖子信息</h2>
        <el-form :model="postdata" label-width="80px" v-if="postdata">
            <el-form-item label="标题">
                <el-input v-model="postdata.title"></el-input>
            </el-form-item>
            <el-form-item label="类别：">
      <el-select v-model="postdata.category" placeholder="请选择帖子类别">
        <el-option label="体育" value="1" />
        <el-option label="音乐" value="2" />
        <el-option label="学习" value="3" />
      </el-select>
    </el-form-item>
            <el-form-item label="内容">
                <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="postdata.content"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
            </el-form-item>
            <el-form-item>
                <el-button style="width:100%;" type="primary" @click="handleSubmit">提交</el-button>
            </el-form-item>
            </el-form>

    </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

import { useRoute } from 'vue-router';
import {getmodifypost,modifypost} from '@/apis/post'
import {toast} from '@/composables/utils'
import {useRouter} from 'vue-router'

const route = useRoute();
const router = useRouter()
const postid= ref(0);
const postdata = ref({})



onMounted(() => {
    const postid = route.params.id;
    console.log(postid);
    getmodifypost(route.params.id).then(res => {
        console.log(res);
        postdata.value = res.data;
    })
})


// wangeditor
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()


// 模拟 ajax 异步获取内容
onMounted(() => {
    setTimeout(() => {
    }, 1500)
})

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

const mode = 'default' // 或 'simple'



// 提交按钮
function handleSubmit() {
    console.log("用户点击了提交", postdata.value);
    modifypost(postdata.value).then(res => {
        toast("修改成功")
        router.push('/post/'+route.params.id)
    })
}
</script>